<template>
  <div class="weather-container" v-if="weatherInfo">
    <div class="weather-overview">
      <h1 class="city">{{"今日"+weatherInfo.city+"天气"}}</h1>
      <div class="temperature">
        {{ weatherInfo.casts[0].daytemp }}°C
        <span v-if="weatherInfo.casts[0].dayweather.includes('晴')">☀️</span>
        <span v-else-if="weatherInfo.casts[0].dayweather.includes('阴')">☁️</span>
        <span v-else-if="weatherInfo.casts[0].dayweather.includes('雨')">🌧️</span>
        <span v-else>💨</span>
      </div>
      <div class="details">
        <div>湿度: 80%</div>
        <div>风力: {{ weatherInfo.casts[0].daywind }} {{ weatherInfo.casts[0].daypower }}</div>
      </div>
    </div>
<div class="forecast-container">
      <div class="forecast" v-for="item in weatherInfo.casts" :key="item.date" :class="{ 'sunny': item.dayweather.includes('晴'), 'cloudy': item.dayweather.includes('阴'), 'rainy': item.dayweather.includes('雨') }">
        <div class="date">{{ item.date }} ({{ getWeekDay(Number(item.week)) }})</div>
        <div class="weather">
          {{ item.dayweather }}
        </div>
        <div class="temp">
          {{ item.daytemp }}°C / {{ item.nighttemp }}°C
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getWeather } from '/@/api/business/weather';

const weatherInfo=ref();

const getWeatherInfo=
async () => {
    const response = await getWeather();
    console.log(response.data.result);
    weatherInfo.value=response.data.result;
}
const getWeekDay = (week: number) => {
  const weekDayMap: { [key: number]: string } = {
    1: '星期一',
    2: '星期二',
    3: '星期三',
    4: '星期四',
    5: '星期五',
    6: '星期六',
    7: '星期日'
  };
  return weekDayMap[week] || '';
};
onMounted(()=>{
    getWeatherInfo();
})
</script>

<style lang="scss" scoped>
.weather-container {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  border-radius: 10px;
  background: #f0f4f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

.weather-overview {
  text-align: center;
  margin-bottom: 10px;
}

.city {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.temperature {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.details {
  display: flex;
  justify-content: space-around;
  width: 100%;
  color: #666;
  font-size: 0.7rem;
}

.forecast-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
}

.forecast {
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #333;
  width: 50%;
  margin-bottom: 5px;
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: scale(1.05);
  }

  &.sunny {
    background-color: #FFEB3B;
  }

  &.cloudy {
    background-color: #90A4AE;
  }

  &.rainy {
    background-color: #1E88E5;
    color: #fff;
  }
}

.date {
  font-weight: bold;
  margin-bottom: 2px;
  font-size: 0.6rem;
}

.weather {
  margin-bottom: 2px;
  font-size: 0.6rem;
}

.temp {
  font-size: 0.8rem;
}
</style>
